<template>
  <div class="page-wrapper">
    <div class="dashboard-container">
      <div class="app-container">
        <!-- 卡片容器 -->
        <el-card>
          <!-- tab 分页 -->
          <el-tabs>
            <!-- 放置页签 -->
            <el-tab-pane label="角色管理">
              <!-- 新增角色按钮 -->
              <el-row style="height: 60px">
                <el-button
                  icon="el-icon-plus"
                  size="small"
                  type="primary"
                  @click="clickBut"
                >新增角色</el-button>
              </el-row>
              <!-- 表格 -->
              <el-table :data="roleList" border="">
                <el-table-column label="角色名称" prop="name" width="240" />
                <el-table-column label="描述" prop="description" />
                <el-table-column label="操作">
                  <!-- 这里的数据时由外层 el-table 进行遍历
                  有多少行，就渲染多少次。如果获得当前正在选人的行数据？
                  使用作用域插槽即可，拿到的是一个对象 -->
                  <template #default="scope">
                    <!--  每一次循环的组件 -->
                    <el-button size="small" type="success">分配权限</el-button>
                    <el-button size="small" type="primary" @click="editRole(scope.row.id)">编辑</el-button>
                    <el-button size="small" type="danger" @click="delRole(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页组件 -->
              <el-row
                type="flex"
                justify="center"
                align="middle"
                style="height: 60px"
              >
                <!-- 分页组件 下标分页 page-size每页显示的条数 -->
                <el-pagination
                  :page-size="pageConfig.pagesize"
                  :total="total"
                  layout="prev,pager,next"
                  @current-change="currentChange"
                />
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="公司信息">
              <el-form label-width="120px" style="margin-top: 50px">
                <el-form-item label="公司名称">
                  <el-input v-model="companyInfo.name" disabled style="width: 400px" />
                </el-form-item>
                <el-form-item label="公司地址">
                  <el-input v-model="companyInfo.companyAddress" disabled style="width: 400px" />
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="companyInfo.mailbox" disabled style="width: 400px" />
                </el-form-item>
                <el-form-item label="备注">
                  <el-input
                    v-model="companyInfo.remarks"
                    type="textarea"
                    :rows="3"
                    disabled
                    style="width: 400px"
                  />
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <!--visible 是否显示  新增弹出 放在最外层 需要时显示  close时间 单机小叉和点击弹窗外面的空白地方-->
        <el-dialog :title="formData.id? '编辑角色':'新增角色'" :visible="isShowDialog" @close="btnCancel">
          <!-- 校验的三个重点
          1 model 2rules prop -->
          <el-form ref="addRole" :model="formData" :rules="rules">
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="formData.name" />
            </el-form-item>
            <el-form-item label="角色描述" prop="description">
              <el-input v-model="formData.description" />
            </el-form-item>
          </el-form>
          <!--footer 时el-ui 自己定义的插槽通过 template 调用 插入到from表单中  -->
          <template #footer>
            <el-button ytpe="primary" @click="btnOk">确定</el-button>
            <el-button @click="btnCancel">取消</el-button>
          </template>

        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getCompanyInfo, getRoleList, addRole, getRoleDetail, updateRole, delRole } from '@/api/setting'
export default {
  data() {
    return {
      companyInfo: {},
      pageConfig: {
        page: 1,
        pagesize: 2
      },
      roleList: [],
      total: 0,
      isShowDialog: false,
      formData: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  // 钩子函数
  async created() {
    // 公司信息
    this.companyInfo = await getCompanyInfo(this.$store.getters.companyId)
    // console.log(this.companyInfo)
    // 发送请求获取角色数据 分页请求
    this.getRoleList()
  },
  methods: {
    // 根据id 删除角色信息
    async delRole(id) {
      try {
        // 二次请求删除 使用组件MessageBox 这是一个异步函数，then确认cath取消删除会报错 阻断浏览器的运行需要捕捉一下错误
        await this.$confirm('是否确认删除')
        // 发起删除请求
        await delRole(id)
        // 提示用户
        this.$message.success('删除成功')
        // 重新加载数据
        // 加载数据之前可以判断当前数据是否只剩下一条
        // 如果剩下一条，删除成功就应该没有了，所以要往前翻一页 同时页码也要保证大于一页 不然会出现  0
        if (this.roleList.length === 1 && this.pageConfig.page > 1) {
          this.pageConfig.page -= 1
        }
        this.getRoleList()
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑角色时函数
    async editRole(id) {
      // 根据id 获取的角色详情信息
      this.formData = await getRoleDetail(id)
      // console.log(id)
      this.isShowDialog = true
    },
    // 取消按钮
    btnCancel() {
      // 清理数据
      this.formData = {
        name: '',
        description: ''
      }
      // 重置表单的 有函数 这时一个同步函数 或个函数只能清理校验规则和默认数据 主动添加的数据不能清理
      this.$refs.addRole.resetFields()
      // 关闭弹窗
      this.isShowDialog = false
    },
    // 确认按钮的函数
    async btnOk() {
      try {
        // 校验表单
        await this.$refs.addRole.validate()
        // 多个按钮公用一个输入框
        // 判断一下那个按钮发请求
        if (this.formData.id) {
          await updateRole(this.formData)
        } else {
          // 新增角色的请求
          await addRole(this.formData)
        }
        // 关闭弹窗
        this.isShowDialog = false
        // 提示用户添加成功
        this.$message.success('操作成功')
        // 更新页面
        this.getRoleList()
      } catch (error) {
        console.log(error)
      }
    },
    currentChange(newpage) {
      // console.log(newpage)
      this.pageConfig.page = newpage
      this.getRoleList()
    },
    // 获取渲染数据 的封装
    async getRoleList() {
      const res = await getRoleList(this.pageConfig)
      // 每次获取的数据
      this.roleList = res.rows
      // 数据总条数
      this.total = res.total
      // console.log(this.roleList)
    },
    // 弹出对话框
    clickBut() {
      this.isShowDialog = true
    }
  }
}
</script>

<style scoped lang="scss">
.page-wrapper{
  margin: 30px;
}
</style>
